/* eslint-disable react/prop-types */
/* eslint-disable @typescript-eslint/no-use-before-define */
import CustomBlockquote from "@/components/Blockquote";
import DictTag, { DictValueEnum } from "@/components/DictTag";
import { PageContainer, ProCard, ProDescriptions } from "@ant-design/pro-components";
import { Image, Space, Tag, Typography } from "antd";
import { useEffect, useState } from "react";
import TenantUserList from "./TenantUser";
import { getDict } from "@/services/api/module/system/dict";
import { useLocation, useNavigate } from "react-router-dom";
import { getTenant } from "@/services/api/module/tenant/tenant/tenants";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import companyBg from "@/assets/companyInfo.jpg";
import Blockquote from "@/components/Blockquote";
export default function TenantDetails() {
	const location = useLocation();
	const navigate = useNavigate();
	const [industry, setIndustry] = useState<any>([]);
	const [scale, setScale] = useState<any>([]);
	const { themeConfig } = useSelector((state: RootState) => state.global);
	const [statusOptions, setStatusOptions] = useState<any>([]);
	const [activeKey, setActiveKey] = useState<string>("baseinfo");
	const [baseInfo, setBaseInfo] = useState<any>(undefined);
	// 获取状态
	const { state } = location;
	useEffect(() => {
		// @ts-ignore
		if (state && state?.id) {
			getTenant(state?.id).then((data: any) => {
				setBaseInfo(data);
			});
			getDict("company_scale").then(data => {
				setScale(data);
			});
			getDict("company_industry").then(data => {
				setIndustry(data);
			});
		}
	}, [state]);
	// useEffect(() => {
	// 	if (state) {
	// 		// @ts-ignore
	// tenant.getTenant(state?.id).then((res: any) => {
	// 	setBaseInfo(res.data);
	// });
	// 	}
	// }, []);

	useEffect(() => {
		getDict("sys_normal_disable").then(data => {
			setStatusOptions(data);
		});
	}, []);

	return (
		<PageContainer
			header={{
				breadcrumb: {},
				tags: <DictTag enums={statusOptions} type="tag" value={baseInfo?.status} />,
				title: "租户详情",
				onBack: () => navigate(-1)
			}}
			token={{
				paddingBlockPageContainerContent: 0,
				paddingInlinePageContainerContent: 0
			}}
			tabActiveKey={activeKey}
			onTabChange={key => setActiveKey(key)}
			tabList={[
				{
					tab: "基础信息",
					key: "baseinfo"
				},
				{
					tab: "企业套餐",
					key: "packages"
				},
				{
					tab: "企业用户",
					key: "userlist"
				}
			]}
		>
			{activeKey === "baseinfo" && <BaseInfo scale={scale} industry={industry} data={baseInfo} themeConfig={themeConfig} />}
			{activeKey === "userlist" && <TenantUserList tenantId={baseInfo?.tenantId} />}
			{activeKey === "packages" && <Packages />}
		</PageContainer>
	);
}

// eslint-disable-next-line react/prop-types
const BaseInfo: React.FC<{ data: any; themeConfig: any; industry: DictValueEnum; scale: DictValueEnum }> = ({
	data,
	themeConfig,
	scale,
	industry
}) => {
	return (
		<ProCard style={{ minHeight: "calc(100vh - 190px)" }}>
			<div
				style={{
					borderRadius: "6px",
					height: 80,
					background: themeConfig?.isDark ? undefined : `url(${companyBg}) 0% 82% / 120% no-repeat`,
					display: "flex",
					padding: "0 10px",
					border: themeConfig?.isDark ? "1px solid" : undefined
				}}
			>
				<Space>
					<div>
						<Image width={60} src={data?.logo} />
					</div>
					<Space direction="vertical" size={1}>
						<Typography.Title level={5} style={{ marginBottom: 0 }}>
							{data?.companyName}
						</Typography.Title>
						<Typography.Text type="secondary" style={{ marginBottom: 0 }}>
							企业公司编号 : {data?.tenantId}
						</Typography.Text>
					</Space>
				</Space>
			</div>
			<br />
			<ProDescriptions
				column={2}
				title={<Blockquote>基础信息</Blockquote>}
				dataSource={data}
				colon={false}
				layout={"vertical"}
				columns={[
					{
						title: "企业名称",
						key: "companyName",
						dataIndex: "companyName",
						ellipsis: true,
						copyable: true
					},

					{
						title: "统一社会信用代码",
						key: "licenseNumber",
						dataIndex: "licenseNumber"
					},
					{
						title: "行业",
						key: "industry",
						valueType: "select",
						dataIndex: "industry",
						valueEnum: industry
					},
					{
						title: "规模",
						key: "scale",
						dataIndex: "scale",
						valueType: "select",
						valueEnum: scale
					},
					{
						title: "企业简介",
						key: "intro",
						dataIndex: "intro"
					}
				]}
			/>
			<ProDescriptions
				column={2}
				colon={false}
				layout={"vertical"}
				title={<Blockquote padding="5px">联系信息</Blockquote>}
				dataSource={data}
				columns={[
					{
						title: "联系人姓名",
						key: "contactRealName",
						dataIndex: "contactRealName",
						copyable: true
					},
					{
						title: "联系人手机",
						key: "contactPhone",
						dataIndex: "contactPhone",
						copyable: true
					},
					{
						title: "座机",
						key: "telephone",
						dataIndex: "telephone",
						copyable: true
					},
					{
						title: "邮编",
						key: "contactEmail",
						dataIndex: "contactEmail",
						copyable: true
					},
					{
						title: "企业地址",
						key: "address",
						dataIndex: "address",
						copyable: true,
						valueType: "textarea"
					}
				]}
			/>
			{/* <ProDescriptions
				column={2}
				colon={false}
				layout={"vertical"}
				title={<CustomBlockquote padding="5px">其他信息</CustomBlockquote>}
				dataSource={data}
				columns={[
					{
						title: "用户数量",
						key: "accountCount",
						dataIndex: "accountCount",
						tooltip: "-1代表不限制用户",
						render: (_: any, record: any) => {
							return record?.accountCount === -1 ? <>不限制</> : <>{record?.accountCount}</>;
						}
					},
					{
						title: "域名",
						key: "domain",
						dataIndex: "domain"
					},
					{
						title: "有效期时间",
						key: "expireTime",
						dataIndex: "expireTime",
						valueType: "date",
						render: (_: any, record: any) => {
							return record?.expireTime ? <>{record?.expireTime}</> : <Tag color="blue">永久有效</Tag>;
						}
					}
				]}
			/> */}
		</ProCard>
	);
};

const Packages = () => {
	return (
		<ProCard title={<Typography.Title level={4}>企业套餐</Typography.Title>} style={{ minHeight: "calc(100vh - 250px)" }}>
			1231
		</ProCard>
	);
};
